<!--
 * @Author: your name
 * @Date: 2021-01-04 09:50:30
 * @LastEditTime: 2021-01-25 23:44:48
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \yellow-member-admin\src\page\add-video\index.vue
-->
<template>
  <div class="img-list">
    <Breadcrumb :navList="['内容管理', '页面图片列表']"></Breadcrumb>
    <TableContainer>
      <div class="handle-box" slot="handle">
       当前页面: 
       <el-select placeholder="全部" class="handle-select mr10" v-model="page_id" @change='selectChange'>
          <el-option
            v-for="(item, index) in pageList"
            :key="index"
            :value="item.id"
            :label="item.page_name"
            >{{ item.page_name }}</el-option
          >
        </el-select>
      </div>
      <el-table slot="table" :data="contentList" style="width: 100%">
        <el-table-column label="序号" type="index" width="80"></el-table-column>
        <el-table-column prop="img_path" label="图片" width="150">
          <template slot-scope="scope">
            <el-image
              :src="`${IMGPATH}/${scope.row.img_path}`"
              :preview-src-list="[`${IMGPATH}/${scope.row.img_path}`]"
            >
            </el-image>
          </template>
        </el-table-column>
     
        <el-table-column label="操作" >
          <template slot-scope="scope">
            <el-popconfirm
              @onConfirm="delContent(scope.row.id, scope.row.img_name)"
              title="确定要删除该销售吗？"
            >
              <el-button type="danger" slot="reference"> 删除 </el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        slot="pagination"
        background
        layout="prev, pager, next"
        :total="+total"
        @current-change="handleCurrentChange"
        :page-size="10"
      >
      </el-pagination>
    </TableContainer>
  </div>
</template>
<script>
import TableContainer from "../../components/TableContainer.vue";
export default {
  components: { TableContainer },
  // name: "add-video",
  data() {
    return {
      contentList: [],
      total: "",
      isStart: 0, //是否开启
      pageList: [], //页面列表
      page_id:''//选中页面id
    };
  },
  created() {
    this.getPageList();
  },
  methods: {
    //选中时触发
    selectChange(page_id){
      this.getContent({page_id});
    },
    // 获取页面列表
    async getPageList() {
      const { code, data } = await this.$api.getPages();
      if (!code) {
        this.pageList = data;
        // 获取图片列表
        this.getContent();
      }
    },
    // 获取图片列表
    async getContent(param) {
      const { code, data } = await this.$api.getContent(param);
      if (!code) {
        this.contentList = data;
      }
    },
    //改变状态
    changestatus(row) {
      this.$api.updateSeller(row);
    },
    //删除图片
    async delContent(content_id, img_name) {
      const { code, msg } = await this.$api.delContent({
        content_id,
        img_name,
      });
      if (!code) {
        this.$message.success(msg);
        this.getContent({page_id:this.page_id});
      }
    },
    // 点击分页触发
    handleCurrentChange(val) {
      /*   this.getVideoList({
        page:val
      }) */
    },
  },
};
</script>
<style lang='scss' scoped>
.img-list {
  .el-tag {
    margin-top: 3px;
    margin-left: 10px;
  }
  .el-image {
    width: 100%;
  }
}
</style>